<!-- src/views/LoginPassword.vue -->
<template>
  <div>
    <Card>
      <CardHeader>
        <CardTitle class="text-2xl font-bold tracking-tight">
          设置新密码
        </CardTitle>  
        <CardDescription class="text-muted-foreground">
          建议使用字母、数字与标点的组合，可以大幅提升账号安全
        </CardDescription>    
      </CardHeader>
      <CardContent>
        <form @submit.prevent="handleSubmit" class="space-y-4">
          <div>
            <Label for="currentPassword">当前密码</Label>
            <Input
              id="currentPassword"
              v-model="currentPassword"
              type="password"
            />
          </div>
          <div>
            <Label for="newPassword">新密码</Label>
            <Input id="newPassword" v-model="newPassword" type="password" />
          </div>
          <div>
            <Label for="confirmPassword">确认新密码</Label>
            <Input
              id="confirmPassword"
              v-model="confirmPassword"
              type="password"
            />
          </div>
          <Button type="submit">更改密码</Button>
        </form>
      </CardContent>
    </Card>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

import {
  Card,
  CardHeader,
  CardTitle,
  CardContent,
  CardDescription
} from '@/components/ui/card'
import { Label } from '@/components/ui/label'
import { Input } from '@/components/ui/input'
import { Button } from '@/components/ui/button'

const currentPassword = ref("");
const newPassword = ref("");
const confirmPassword = ref("");

const handleSubmit = () => {
  // 实现更改密码的逻辑
  console.log("Changing password");
};
</script>
